<template>
	<div class="contents">
		<div class="contetn_left">
			<Left1HomeCategory style="height: 40%;" />
			<Left2HomeCertified style="height: 60%;" />
		</div>
		<div class="contetn_center"><Center1HomeMap style="height: 100%;" /></div>
		<div class="contetn_right">
			<Right1HomeSale style="height: 40%;" />
			<Right2HomeVillage style="height: 60%;" />
		</div>
	</div>
</template>

<script>
import Left1HomeCategory from './components/Left1HomeCategory.vue';
import Left2HomeCertified from './components/Left2HomeCertified.vue';
import Center1HomeMap from './components/homeMap';
import Right1HomeSale from './components/Right1HomeSale.vue';
import Right2HomeVillage from './components/Right2HomeVillage.vue';

export default {
	components: {
		Left1HomeCategory,
		Left2HomeCertified,
		Center1HomeMap,
		Right1HomeSale,
		Right2HomeVillage
	},
	data() {
		return {};
	},

	methods: {}
};
</script>
<style lang="scss" scoped>
.contents {
	width: 100%;
	height: calc(100% - 150px);
	box-sizing: border-box;
	padding: 20px;
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-content: space-between;
	min-height: calc(100% - 150px);

	//左边 右边 结构一样
	.contetn_left,
	.contetn_right {
		width: 30%;
		// box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 20px;
		justify-content: space-around;
		position: relative;
	}
	// 中间
	.contetn_center {
		width: 40%;
		display: flex;
		flex-direction: column;
		gap: 20px;
		justify-content: space-around;
	}
}

@keyframes rotating {
	0% {
		-webkit-transform: rotate(0) scale(1);
		transform: rotate(0) scale(1);
	}
	50% {
		-webkit-transform: rotate(180deg) scale(1.1);
		transform: rotate(180deg) scale(1.1);
	}
	100% {
		-webkit-transform: rotate(360deg) scale(1);
		transform: rotate(360deg) scale(1);
	}
}
</style>
